<template>
	<view class="beijt" v-if="pageShow">
		<view class="box">
			<view class="flexcenter">
				<image :src="userinfo.avatar_text" mode="" class="img"></image>
				<view>
					<view style="text-align: left;">{{userinfo.nickname}}</view>
					<view class="txt">手机号：{{userinfo.mobile}}</view>
				</view>
			</view>
			<view class="shilitu">
				<!-- <image  src="/static/logo.png" mode=""></image>  -->
				<uqrcode ref="uqrcode" canvas-id="qrcode" @click="ewmfn" v-bind:value="qrcodeurl"
					:options="{ margin: 10, foregroundImageSrc:'https://socialmall.yuntaiqikeji.com/uploads/20230613/77e9b05cd8cb3b572be913be3b15879b.png'}">
				</uqrcode>
			</view>
		</view>
		<view>
			<button open-type="share" class="footer_stars">
				<view class=" btn"></view>
			</button>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				userinfo: {},

				qrcodeurl: '',
				pageShow: false
			}
		},
		onShow() {
			let _this = this
			_this.getdata()
			this.datalist()
		},

		methods: {
			// 二维码点击预览图片
			ewmfn() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						console.log(res);
						var i = [res.tempFilePath]; //获取当前页面的轮播图数据
						//uniapp预览轮播图
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
					}
				});
			},

			// // 获取链接
			getdata() {
				let _this = this;
				httpRequest.request('api/index/getConfigInfo', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.pageShow = true
						_this.qrcodeurl = res.data.yq_user_url + '?rec_uid=' + uni.getStorageSync("user_id")

					}
				})
			},
			onShareAppMessage() {
				return {
					title: "社交商城",
					path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
				}
			},
			datalist() {
				let _this = this;
				httpRequest.request('api/user/index', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.userinfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// #qrcode{
	// 	width: 100%;
	// 	height: 100%;
	// }
	/deep/.uqrcode-canvas{
		width: 380rpx !important;
		height: 380rpx !important;
		margin-top: -30rpx;
	}
	.txt {
		font-size: 24rpx;
	}

	.img {
		width: 85rpx;
		height: 85rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.box {
		background-color: #F46C1A;
		padding: 54rpx 80rpx;
		background-color: #ffff;
		position: absolute;
		top: 32%;
		left: 10%;
		right: 10%;
		text-align: center;
		border-radius: 4%;
		box-sizing: border-box;
	}

	.yaoqhybtn {
		width: 100%;
		height: 83rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 600;
		color: RGBA(239, 16, 0, 1);
		background-color: #fed970;
		border-radius: 40rpx 40rpx;
	}

	.btn {
		width: 535rpx;
		height: 113rpx;
		background-image: url('../static/image/my/yqbtn.png');
		background-size: 100% 100%;
		position: fixed;
		left: 50%;
		bottom: 80rpx;
		transform: translateX(-50%);
	}

	.shilitu {
		margin: 40rpx auto 0;
		width: 392rpx;
		height: 392rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.beijt {
		width: 100%;
		background-size: 100% 100%;
		/*#ifdef H5*/
		height: calc(100vh - 88rpx);
		/*#endif*/
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		min-height: 100vh;
		/*#endif*/
		background-image: url('../static/image/my/yqbg.png');
	}
</style>